<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

  <el-container>
    <el-header height="150">
      <div style="width: 1200px;margin: 0 auto;">
        <img src="../day04/imgs/logo.png" style="width: 300px;vertical-align: middle">
        <a href="">首页</a>
        <a href="">热点咨询</a>
        <a href="">商家入驻</a>
        <a href="">社会招聘</a>
        <a href="">校园招聘</a>
        <a href="">帮助</a>
      </div>
      <!--导航菜单开始-->
      <div>
        <el-menu
                :default-active="1"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
          <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
          <!--搜索框开始-->
          <div style="float: right;margin-top: 10px">
            <el-input placeholder="请输入搜索内容">


              <!--slot="append:作用是将按钮追加在搜索框的后面-->
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <!--搜索框结束-->
        </el-menu>
      </div>
      <!--导航菜单结束-->
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return { //在这里面定义变量
        categoryArr: [
          {id: 1, name: "精彩活动"},
          {id: 2, name: "当季女装"},
          {id: 3, name: "品牌男装"},
          {id: 4, name: "环球美食"},
          {id: 5, name: "医药健康"},
          {id: 6, name: "美妆彩妆"}],
        currentDate: new Date()
      }
    }
  })
</script>
</html>